<?php $this->load->view('base/header');?>

        <section>
            <div class="container_8 clearfix">                

                <!-- Main Section -->

                <section class="main-section grid_8">
                    <!-- Styles Section -->
                    <div class="main-content">
                        <header>
                            <ul class="action-buttons clearfix fr">
                                <li>
                                    <a href="#" class="button button-red" onclick="$('#colorpickerform').toggle();"><span class="color-swatch"></span>Change Background</a>
                                    <div id="colorpickerform" style="display: none; padding: 5px; position: absolute; background: #fff; border: 1px solid #ccc;">
                                        <div id="colorpicker"></div>
                                        <div id="newbgcolor" class="ac"></div>
                                    </div>
                                </li>
                            </ul>
                            <h2>Styles</h2>
                        </header>
                        <section class="container_6 clearfix">
                            <div class="grid_6">
                                <h3>Tooltips</h3>
                                <div id="tooltip-demo">
                                    <img src="images/autumn/scottwills_autumn4_t.jpg" title="A must have tool for designing better layouts and more intuitive user-interfaces."/>
                                    <img src="images/autumn/scottwills_autumn5_t.jpg" title="Tooltips can be positioned anywhere relative to the trigger element."/>
                                    <img src="images/autumn/scottwills_autumn6_t.jpg" title="Tooltips can contain any HTML such as links, images, forms, tables, etc."/>
                                    <img src="images/autumn/scottwills_autumn2_t.jpg" title="There are many built-in show/hide effects and you can also make your own."/>
                                    <img src="images/autumn/scottwills_autumnleaf_t.jpg" title="A must have tool for designing better layouts and more intuitive user-interfaces."/>
                                    <img src="images/autumn/scottwills_butterfly_t.jpg" title="Tooltips can be positioned anywhere relative to the trigger element."/>
                                    <img src="images/autumn/scottwills_farmhouse2_t.jpg" title="Tooltips can contain any HTML such as links, images, forms, tables, etc."/>
                                </div>

                                <h3 class="leading">Buttons</h3>
                                <button class="button button-gray">Gray Button</button>
                                <button class="button button-orange">Orange Button</button>
                                <button class="button button-red">Red Button</button>
                                <button class="button button-blue">Blue Button</button>
                                <button class="button button-green">Green Button</button>

                                <h3 class="leading">Action Buttons</h3>
                                <button class="button button-gray"><span class="add"></span>Add</button>
                                <button class="button button-gray"><span class="pencil"></span>Edit</button>
                                <button class="button button-gray"><span class="disk"></span>Save</button>
                                <button class="button button-gray"><span class="bin"></span>Delete</button>
                                <button class="button button-gray"><span class="accept"></span>OK</button>
                                <button class="button button-gray"><span class="calendar"></span>Calendar</button>
                                <button class="button button-gray"><span class="help"></span>Help</button>
                                <button class="button button-gray"><span class="view-list"></span>List View</button>
                                <button class="button button-gray"><span class="view-grid"></span>Grid View</button>
                                <br />
                                <br />
                                <ul class="action-buttons clearfix">
                                    <li><a href="#" class="button button-gray no-text" title="Add"><span class="add"></span></a></li>
                                    <li><a href="#" class="button button-gray no-text" title="Edit"><span class="pencil"></span></a></li>
                                    <li><a href="#" class="button button-gray no-text" title="Save"><span class="disk"></span></a></li>
                                    <li><a href="#" class="button button-gray no-text" title="Delete"><span class="bin"></span></a></li>
                                    <li><a href="#" class="button button-gray no-text" title="OK"><span class="accept"></span></a></li>
                                    <li><a href="#" class="button button-gray no-text" title="Calendar"><span class="calendar"></span></a></li>
                                    <li><a href="#" class="button button-gray no-text" title="Help"><span class="help"></span></a></li>
                                    <li><a href="#" class="button button-gray no-text" title="List View"><span class="view-list"></span></a></li>
                                    <li><a href="#" class="button button-gray no-text" title="Grid View"><span class="view-grid"></span></a></li>
                                </ul>

                                <h3 class="leading">Pagination</h3>

                                <ul class="pagination clearfix">
                                    <li class="first"><a class="button-gray" href="#">First</a></li>
                                    <li class="prev"><a class="button-gray" href="#">&laquo;</a></li>
                                    <li class="page"><a class="button-gray" href="#">1</a></li>
                                    <li class="page"><a class="button-gray" href="#">2</a></li>
                                    <li class="page"><a class="button-gray" href="#">3</a></li>
                                    <li class="page"><a class="button-gray" href="#">4</a></li>
                                    <li class="page"><a class="button-gray" href="#">5</a></li>
                                    <li class="next"><a class="button-gray" href="#">&raquo;</a></li>
                                    <li class="last"><a class="button-gray" href="#">Last</a></li>
                                </ul>
                                <ul class="pagination clearfix">
                                    <li class="first"><a class="button-orange" href="#">First</a></li>
                                    <li class="prev"><a class="button-orange" href="#">&laquo;</a></li>
                                    <li class="page"><a class="button-orange" href="#">1</a></li>
                                    <li class="page"><a class="button-orange" href="#">2</a></li>
                                    <li class="page"><a class="button-orange" href="#">3</a></li>
                                    <li class="page"><a class="button-orange" href="#">4</a></li>
                                    <li class="page"><a class="button-orange" href="#">5</a></li>
                                    <li class="next"><a class="button-orange" href="#">&raquo;</a></li>
                                    <li class="last"><a class="button-orange" href="#">Last</a></li>
                                </ul>
                                <ul class="pagination clearfix">
                                    <li class="first"><a class="button-red" href="#">First</a></li>
                                    <li class="prev"><a class="button-red" href="#">&laquo;</a></li>
                                    <li class="page"><a class="button-red" href="#">1</a></li>
                                    <li class="page"><a class="button-red" href="#">2</a></li>
                                    <li class="page"><a class="button-red" href="#">3</a></li>
                                    <li class="page"><a class="button-red" href="#">4</a></li>
                                    <li class="page"><a class="button-red" href="#">5</a></li>
                                    <li class="next"><a class="button-red" href="#">&raquo;</a></li>
                                    <li class="last"><a class="button-red" href="#">Last</a></li>
                                </ul>
                                <ul class="pagination clearfix">
                                    <li class="first"><a class="button-blue" href="#">First</a></li>
                                    <li class="prev"><a class="button-blue" href="#">&laquo;</a></li>
                                    <li class="page"><a class="button-blue" href="#">1</a></li>
                                    <li class="page"><a class="button-blue" href="#">2</a></li>
                                    <li class="page"><a class="button-blue" href="#">3</a></li>
                                    <li class="page"><a class="button-blue" href="#">4</a></li>
                                    <li class="page"><a class="button-blue" href="#">5</a></li>
                                    <li class="next"><a class="button-blue" href="#">&raquo;</a></li>
                                    <li class="last"><a class="button-blue" href="#">Last</a></li>
                                </ul>
                                <ul class="pagination clearfix">
                                    <li class="first"><a class="button-green" href="#">First</a></li>
                                    <li class="prev"><a class="button-green" href="#">&laquo;</a></li>
                                    <li class="page"><a class="button-green" href="#">1</a></li>
                                    <li class="page"><a class="button-green" href="#">2</a></li>
                                    <li class="page"><a class="button-green" href="#">3</a></li>
                                    <li class="page"><a class="button-green" href="#">4</a></li>
                                    <li class="page"><a class="button-green" href="#">5</a></li>
                                    <li class="next"><a class="button-green" href="#">&raquo;</a></li>
                                    <li class="last"><a class="button-green" href="#">Last</a></li>
                                </ul>

                                <h3 class="leading">Progress Bars</h3>

                                <div class="progress progress-orange"><span style="width: 10%"><b>10%</b></span></div>
                                <div class="progress progress-red"><span style="width: 20%"><b>20%</b></span></div>
                                <div class="progress progress-blue"><span style="width: 30%"><b>30%</b></span></div>
                                <div class="progress progress-green"><span style="width: 40%"><b>40%</b></span></div>

                                <h3 class="leading">Notifications</h3>

                                <div class="message info closeable">
                                    <h3>Information</h3>
                                    <p>
                                        This is a closeable info message.
                                    </p>
                                </div>
                                <div class="message success closeable">
                                    <h3>Success!</h3>
                                    <p>
                                        This is a closeable success message.
                                    </p>
                                </div>
                                <div class="message warning closeable">
                                    <h3>Warning!</h3>
                                    <p>
                                        This is a closeable warning message.
                                    </p>
                                </div>
                                <div class="message error closeable">
                                    <h3>Error!</h3>
                                    <p>
                                        This is a closeable error message.
                                    </p>
                                </div>

                                <h3 class="leading">Text Styles</h3>

                                <h1>Heading 1</h1>
                                <h2>Heading 2</h2>
                                <h3>Heading 3</h3>
                                <h4>Heading 4</h4>
                                <h5>Heading 5</h5>
                                <h6>Heading 6</h6>
                                <hr />
                            </div>

                            <div class="clear"></div>

                            <div class="grid_2">
                                <dl>
                                    <dt class="code">&lt;a&gt;</dt>
                                    <dd><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></dd>
                                    <dt class="code">&lt;abbr&gt;</dt>
                                    <dd><abbr title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</abbr></dd>
                                    <dt class="code">&lt;code&gt;</dt>
                                    <dd><code>Lorem ipsum dolor sit amet</code></dd>
                                </dl>
                            </div>
                            <div class="grid_2">
                                <dl>
                                    <dt class="code">&lt;em&gt;</dt>
                                    <dd><em>Lorem ipsum dolor sit amet</em></dd>
                                    <dt class="code">&lt;del&gt;</dt>
                                    <dd><del>Lorem ipsum dolor sit amet</del></dd>
                                    <dt class="code">&lt;mark&gt;</dt>
                                    <dd><mark>Lorem ipsum dolor sit amet</mark></dd>
                                </dl>
                            </div>
                            <div class="grid_2">
                                <dl>
                                    <dt class="code">&lt;small&gt;</dt>
                                    <dd><small>Lorem ipsum dolor sit amet</small></dd>
                                    <dt class="code">&lt;strong&gt;</dt>
                                    <dd><strong>Lorem ipsum dolor sit amet</strong></dd>
                                </dl>
                            </div>

                            <div class="clear"></div>

                            <div class="grid_6">
                                <hr />
                            </div>

                            <div class="clear"></div>

                            <div class="grid_2">
                                <div class="code">&lt;dl&gt;&lt;dt&gt;&lt;dd&gt;</div>
                                <dl>
                                    <dt>Lorem ipsum</dt>
                                    <dd>Lorem ipsum dolor sit amet.</dd>
                                    <dt>Lorem ipsum</dt>
                                    <dd>Lorem ipsum dolor sit amet.</dd>
                                    <dt>Lorem ipsum</dt>
                                    <dd>Lorem ipsum dolor sit amet.</dd>
                                </dl>
                            </div>
                            <div class="grid_2">
                                <div class="code">&lt;ol&gt;&lt;li&gt;</div>
                                <ol class="nostyle">
                                    <li>Lorem ipsum dolor sit amet</li>
                                    <li>Lorem ipsum dolor sit amet
                                        <ol>
                                            <li>Lorem ipsum dolor sit amet</li>
                                            <li>Lorem ipsum dolor sit amet
                                                <ol>
                                                    <li>Lorem ipsum dolor sit amet</li>
                                                    <li>Lorem ipsum dolor sit amet</li>
                                                </ol>
                                            </li>
                                        </ol>
                                    </li>
                                </ol>
                            </div>
                            <div class="grid_2">
                                <div class="code">&lt;ul&gt;&lt;li&gt;</div>
                                <ul class="nostyle">
                                    <li>Lorem ipsum dolor sit amet</li>
                                    <li>Lorem ipsum dolor sit amet
                                        <ul>
                                            <li>Lorem ipsum dolor sit amet</li>
                                            <li>Lorem ipsum dolor sit amet
                                                <ul>
                                                    <li>Lorem ipsum dolor sit amet</li>
                                                    <li>Lorem ipsum dolor sit amet</li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </section>
                    </div>
                    <!-- End Styles Section -->

                </section>

                <!-- Main Section End -->

            </div>
        </section>
    </div>
    
	<?php $this->load->view('base/footer');?>
